import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';

import MemberLayout from '@/component/member/Layout';
import MTable from '@/component/common/MTable';
import { Pagination, Form, Input, Select, DatePicker } from 'antd';

import MModal from '@/component/common/MModal';
import ModifyPswModal from '@/component/member/ModifyPswModal';
import style from './style.scss';
import CreateBrokerModal from "../../component/member/CreateBrokerModal";
import BrokerChangeStoreModal from '../../component/member/BrokerChangeStoreModal';
import BrokerChangeHouseModal from '../../component/member/BrokerChangeHouseModal';
import adminType from '@/tool/adminType';

const FormItem = Form.Item;
const Option = Select.Option;
const mConfirm = MModal.confirm;

import FilterListPage from '@/component/common/FilterListPage';

import ApiHelper from '@/store/ApiHelper';
import StoreListMini from '@/store/StoreListMini';
import { account_list, delete_member as api_delete_member } from '@/constants/ApiTypes';
import format from '@/tool/format';

// const testData = [
//     { a: '吴超', b: '1234567890@qq.com', c: '解放路店', d: '120套', e: '300套', f: '80套', g: '1234567元', h: '123456次', k: '2017-10-08 22:54' },
//     { a: '吴超', b: '1234567890@qq.com', c: '解放路店', d: '120套', e: '300套', f: '80套', g: '1234567元', h: '123456次', k: '2017-10-08 22:54' }
// ];

@observer class Filter extends Component {
    static propTypes = {
        form: PropTypes.any,
        onSubmit: PropTypes.func
    };
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                if (this.props.onSubmit) {
                    for (let key in values) {
                        if (values[key] === '') delete values[key];
                    }
                    this.props.onSubmit(values);
                }
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        const storeListMini = StoreListMini.info;

        let storeOptionList = storeListMini.map((val, index) => {
            return <Option key={index} value={`${val.store_id}`}>{val.store_name}</Option>;
        });
        return (
            <Form layout="inline" onSubmit={this.handleSubmit}>
                {adminType() == 1 &&
                <FormItem label="门店">
                    {getFieldDecorator('store_id', {
                        initialValue: ''
                    })(
                        <Select placeholder="选择门店" style={{ width: 150 }}>
                            <Option key="default" value="">不限</Option>
                            {storeOptionList}
                        </Select>
                    )}
                </FormItem>}
                <FormItem label="账号">
                    {getFieldDecorator('account', {
                        initialValue: ''
                    })(
                        <Input/>
                    )}
                </FormItem>
                <FormItem>
                    <button className={style['submit-btn']} type="submit">搜索</button>
                </FormItem>
            </Form>
        );
    }
}
const FilterWrapped = Form.create()(Filter);

@observer class MemberBroker extends FilterListPage {
    constructor(props) {
        super(props);
        const state = {
            modifyPswModalVisible: false,
            modifyPswModalProps: {
                account_name: '',
                account_id: 0
            },
            createBrokerModalVisible: false,
            changeStoreModalVisible: false,
            changeHouseModalVisible: false,
            changeStoreModalProps: {
                broker_id: '',
                broker_name: '',
                store_name: ''
            },
            changeHouseModalProps: {
                broker_id: '',
                broker_name: ''
            }
        };
        this.listApiType = account_list;
        this.defaultQuery = {
            account_type: 2 //经纪人账号
        };
        this._setDefaultState(state);
    }
    async pageDidMount() {
        const result = await StoreListMini.getInfo();
        if (!result) return;
        this._setState({ loading: false });
    }
    showModifyPswModal = (account_name, account_id) => {
        this.setState({
            modifyPswModalProps: {
                account_name: account_name,
                account_id: account_id
            },
            modifyPswModalVisible: true
        });
    };
    closeModifyPswModal = () => {
        this.setState({ modifyPswModalVisible: false });
    };
    deleteConfirm = (account_id) => {
        mConfirm({
            title: '是否删除该账号',
            titleStyle: { fontSize: 16 },
            width: 300,
            height: 177,
            content: '',
            okText: '是',
            cancelText: '否',
            okClassName: 'primary-btn-ok',
            cancelClassName: 'primary-btn-cancel',
            showTopClose: false,
            onOk: async () => {
                //账号删除
                const data = { org_uid: account_id };
                const result = await ApiHelper.requestPost(api_delete_member, data);
                if (result.status) {
                    MModal.success({ title: '操作成功', content: '操作成功', duration: 1.5 });
                    this.refresh();
                } else {
                    MModal.success({ title: '操作失败', content: result.info });
                }
            },
            onCancel() {}
        });
    };
    showCreateBrokerModal = () => {
        this.setState({ createBrokerModalVisible: true });
    };
    closeCreateBrokerModal = (refresh = false) => {
        if (refresh == true) this.refresh();
        this.setState({ createBrokerModalVisible: false });
    };
    showChangeStoreModal = (broker_name, store_name, broker_id) => {
        this.setState({
            changeStoreModalProps: {
                broker_name: broker_name,
                store_name: store_name,
                broker_id: broker_id
            },
            changeStoreModalVisible: true
        });
    };
    closeChangeStoreModal = (refresh = false) => {
        if (refresh) this.refresh();
        this.setState({ changeStoreModalVisible: false });
    };
    showChangeHouseModal = (broker_name, broker_id) => {
        this.setState({
            changeHouseModalProps: {
                broker_name: broker_name,
                broker_id: broker_id
            },
            changeHouseModalVisible: true
        });
    };
    closeChangeHouseModal = (refresh = false) => {
        if (refresh) this.refresh();
        this.setState({ changeHouseModalVisible: false });
    };
    render() {
        const { modifyPswModalVisible, modifyPswModalProps, createBrokerModalVisible, changeStoreModalVisible, changeStoreModalProps,
            changeHouseModalVisible, changeHouseModalProps,
            dataList, spinning } = this.state;
        const { showModifyPswModal, closeModifyPswModal,
            deleteConfirm, showCreateBrokerModal, closeCreateBrokerModal,
            showChangeStoreModal, closeChangeStoreModal, showChangeHouseModal, closeChangeHouseModal
        } = this;

        const account_oper = (text, record, dataIndex) => {
            return (
                <div className="oper-text">
                    <a href="javascript:void(0);" onClick={() => { showModifyPswModal(record.mobile, record.account_id) }}>修改密码</a>/
                    <a href="javascript:void(0);" onClick={() => { deleteConfirm(record.account_id) }}>删除</a>
                </div>
            );
        };

        const member_change = (text, record, dataIndex) => {
            return (
                <div className="oper-text">
                    <a href="javascript:void(0);" onClick={() => showChangeHouseModal(record.broker_name, record.account_id)}>房源</a>/
                    <a href="javascript:void(0);" onClick={() => showChangeStoreModal(record.broker_name, record.store_name, record.account_id)}>门店</a>
                </div>
            );
        };
        const last_login = (text, record, dataIndex) => {
            if (text == 0) return '从未登录';
            return format.timeString(text);
        };

        const columns = [
            { title: '经纪人', dataIndex: 'broker_name', align: 'middle' },
            { title: '账号/手机号', dataIndex: 'account', align: 'middle' },
            { title: '门店', dataIndex: 'store_name', align: 'middle' },
            { title: '上架房源', dataIndex: 'house_up_count' },
            { title: '签约合同', dataIndex: 'all_contract', align: 'middle' },
            { title: '分期', dataIndex: 'stage_contract', align: 'middle' },
            { title: '利润收入', dataIndex: 'profit', align: 'middle', render: (text, record, dataIndex) => isNaN(text) ? text : text / 100 + '元' },
            { title: '点击量', dataIndex: 'view_count', align: 'middle' },
            { title: '转移', dataIndex: 'i', align: 'middle', render: member_change },
            { title: '账号操作', dataIndex: 'j', align: 'middle', render: account_oper },
            { title: '最后一次登录', dataIndex: 'last_login_time', align: 'middle', render: last_login }
        ];

        return (
            <MemberLayout plusOnClick={showCreateBrokerModal} loading={this.state.loading}>
                <div className={style['top-filter']}>
                    <CreateBrokerModal visible={createBrokerModalVisible} onClose={closeCreateBrokerModal} />
                    <FilterWrapped onSubmit={this.getDataListWithFilter} />
                </div>
                <MTable columns={columns} dataSource={dataList} spinning={spinning}/>
                <ModifyPswModal visible={modifyPswModalVisible} onClose={closeModifyPswModal} {...modifyPswModalProps} />
                <BrokerChangeStoreModal visible={changeStoreModalVisible} onClose={closeChangeStoreModal} {...changeStoreModalProps} />
                <BrokerChangeHouseModal visible={changeHouseModalVisible} onClose={closeChangeHouseModal} {...changeHouseModalProps} />
                <div className="pagination">
                    {this.state.total > 0 && <Pagination showQuickJumper current={this.state.current_page} pageSize={10} total={this.state.total} onChange={this.pageOnChange} />}
                </div>
            </MemberLayout>
        );
    }
}

export default MemberBroker;